* {margin: 0; padding: 0; box-sizing: border-box;}

body {overflow-x: hidden; background-image: url("../images/bg_repeat.jpg"); background-size: 100%;}
html {font-size: calc(100vw/10.8);}
img {display: block;}

.flex {display: -webkit-flex; display: flex;}
.flex-item {flex: 1;}
.center {text-align: center; justify-content: center;}

.pop-bg {position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 999; background-color: rgba(0,0,0,.5); display: none; justify-content: center; align-items: center;}
.pop-bg.show,.pop-bg-share.show {display: -webkit-flex; display: flex;}
.pop-bg-share {position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 9999; background-color: rgba(0,0,0,.5); display: none; justify-content: center; align-items: center;}

.page {position: relative; min-height: 100vh;}
.page.index {background-image: url("../images/bg.jpg"); background-size: 100%; background-repeat: no-repeat; background-position: left bottom;}

.page .tree {position: absolute; left: 0; top: 0; width: 5.68rem;}
.page .station {position: absolute; width: 100%; bottom: 0;}
.page .rabbit {position: absolute; width: 100%; bottom: 3.33rem;}
.page .flower {position: absolute; width: 100%; left: 0; top: 5.8rem;}
.page .moon-box {position: absolute; width: 10.8rem; height: 12.65rem; top: .5rem; align-items: center; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in;}
.page .moon-box > img.moon {width: 7.85rem; height: 7.86rem;}
.page .moon-box > img.moon-cake {width: 100%; position: absolute; left: 0; top: 0; display: none;}
.page .lantern {position: absolute; width: 100%; top: 1.68rem;}
.page .click-text {position: absolute; width: 100%; left: 0; top: 11.63rem; display: none;}
.page .point {position: absolute; width: 1.64rem; right: .62rem; top: 9.08rem; display: none;}

.page.content {background-image: url("../images/bg_content.jpg"); background-size: 100%; background-repeat: no-repeat; background-position: left bottom; align-items: center; display: none;}
.page.content.show {display: -webkit-flex; display: flex;}
.page .tree-content {position: absolute; width: 4.42rem; left: 0; top: 0;}
.page .poster-make-box {}
.page .poster-make-box > p {font-size: .32rem; line-height: .48rem; color: #fff; text-align: center; font-weight: bold; margin-bottom: .56rem;}
.page .poster-make-box .poster-card {width: 6.25rem; height: 9.69rem; margin-bottom: .2rem;}
.page .poster-make-box .poster-card.friend {margin-bottom: 1.2rem;}
.page .poster-make-box .record-btn-box {justify-content: space-between; margin-bottom: .8rem; position: relative;}
.page .poster-make-box .record-btn-box .record-btn {width: 2.25rem; height: 3.24rem; background-image: url("../images/record_btn.png"); background-size: 100%; background-repeat: no-repeat;}
.page .poster-make-box .record-btn-box .record-btn.recording {background-image: url("../images/record_btn_recording.png"); background-size: 100%; background-repeat: no-repeat;}
.page .poster-make-box .record-btn-box .playing-icon {position: absolute; width: 2.7rem; right: -1.34rem; top: -.6rem; display: none;}
.page .poster-make-box .record-btn-box .play-btn {width: 2.2rem; height: 2.59rem; background-image: url("../images/play_btn.png"); background-size: 100%; background-repeat: no-repeat;}
.page .poster-make-box .record-btn-box .play-btn.playing {background-image: url("../images/play_btn_playing.png"); background-size: 100%; background-repeat: no-repeat;}
.page .poster-make-box .make-poster-btn {width: 4.83rem; background-color: #3573a5; border: #faebc3 .06rem solid; border-radius: .1rem; margin: 0 auto; display: block;}
.page .poster-make-box .friend-box {position: relative; margin-top: -.7rem; margin-bottom: .5rem;}
.page .poster-make-box .friend-box .friend-img-box {width: 2.2rem; height: 2.2rem; border-radius: .2rem; border: #faebc3 .1rem solid; overflow: hidden; margin: 0 auto .23rem;}
.page .poster-make-box .friend-box > p {font-size: .6rem; color: #fff; text-align: center; margin-bottom: .1rem;}
.page .poster-make-box .friend-box > img {width: 3.93rem; margin: 0 auto;}
.page .poster-make-box .friend-box .friend-play-btn {position: absolute; width: 1.58rem; height: .89rem; background-image: url("../images/friend_poster_play.png"); background-size: 100%; background-repeat: no-repeat; top: .68rem; right: .28rem;}
.page .poster-make-box .friend-box .friend-play-btn.playing {background-image: url("../images/friend_poster_playing.png"); background-size: 100%; background-repeat: no-repeat;}
.page .poster-make-box .friend-box .playing-icon {position: absolute; width: 2.7rem; right: -1.34rem; top: -.2rem; display: none;}
.page .recording-box {position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0,0,0,.52); justify-content: center; align-items: center; flex-direction: column; display: none;}
.page .recording-box.show {display: -webkit-flex; display: flex;}
.page .recording-box .record-sound {width: 6.41rem; height: 2.02rem; margin-bottom: 1.2rem;}
.page .recording-box .recording-timer {text-align: center; font-size: .69rem; color: #ffbc45; font-weight: bold;}
.page .recording-box .recording-timer > span {color: #fff;}
.page .recording-box > p {font-size: .36rem; color: #fff; line-height: .6rem;}

.page.poster {display: none;}
.page .poster-share {position: absolute; width: 1.08rem; top: 11.5rem; left: .66rem;}
.page .poster-bottom {height: calc(100vh - 16.18rem); min-height: 4.19rem; background-color: #fff; justify-content: center; align-items: center; position: absolute; width: 100%; left: 0; bottom: 0;}
.page .poster-bottom .poster-bottom-box {width: 9.96rem; height: 3.4rem; border-radius: .2rem; background-color: #ffb75a; position: relative;}
.page .poster-bottom .poster-bottom-box .bg {position: absolute; width: 10.8rem; height: 4.23rem; left: -.41rem; top: -.69rem;}
.page .poster-bottom .poster-bottom-box .qr-code {position: absolute; width: 2.15rem; height: 2.15rem; top: .62rem; left: .75rem;}
.page .poster-bottom .poster-bottom-box .user-img {position: absolute; width: 2rem; top: .55rem; right: .55rem; border-radius: 50%;}
.page .poster-bottom .poster-bottom-box .user-name {position: absolute; width: 2rem; color: #fff; font-size: .24rem; font-weight: bold; text-align: center; bottom: .3rem; right: .55rem;}

.page.share {position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 999; display: none;}
.page.share.show {display: -webkit-flex; display: flex;}
.page .lantern1 {position: absolute; width: 100%; top: 2.64rem;}
.page .tree1 {position: absolute; left: 0; top: 0; width: 7.26rem;}
.page .share-point {position: absolute; width: 1.75rem; top: .85rem; right: 1.05rem;}
.page .share-text {position: absolute; left: 0; top: 6rem;}



